import type { ColumnDef } from "@tanstack/vue-table";
import { h } from "vue";

import { labels, priorities, statuses } from "@/data/data";
import type { Task } from "@/data/schema";
import DataTableColumnHeader from "./DataTableColumnHeader.vue";
import DataTableRowActions from "./DataTableRowActions.vue";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";

export const columns: ColumnDef<Task>[] = [
  {
    id: "select",
    header: ({ table }) =>
      h(Checkbox, {
        checked:
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate"),
        "onUpdate:checked": (value: any) => table.toggleAllPageRowsSelected(!!value),
        ariaLabel: "Select all",
        class: "translate-y-0.5",
      }),
    cell: ({ row }) =>
      h(Checkbox, {
        checked: row.getIsSelected(),
        "onUpdate:checked": (value: any) => row.toggleSelected(!!value),
        ariaLabel: "Select row",
        class: "translate-y-0.5",
      }),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "id",
    header: ({ column }) => h(DataTableColumnHeader, { column, title: "任务" }),
    cell: ({ row }) => h("div", { class: "w-20" }, row.getValue("id")),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "title",
    header: ({ column }) => h(DataTableColumnHeader, { column, title: "Title" }),
    cell: ({ row }) => {
      const label = labels.find((label) => label.value === row.original.label);
      return h("div", { class: "flex space-x-2" }, [
        label ? h(Badge, { variant: "outline" }, () => label.label) : null,
        h("span", { class: "max-w-[500px] truncate font-medium" }, row.getValue("title")),
      ]);
    },
  },
  {
    accessorKey: "status",
    header: ({ column }) => h(DataTableColumnHeader, { column, title: "状态" }),
    cell: ({ row }) => {
      const status = statuses.find((status) => status.value === row.getValue("status"));
      if (!status) return null;
      return h("div", { class: "flex w-[100px] items-center" }, [
        status.icon && h(status.icon, { class: "mr-2 h-4 w-4 text-muted-foreground" }),
        h("span", {class:"text-amber-600"},status.label),
      ]);
    },
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id));
    },
  },
  {
    accessorKey: "priority",
    header: ({ column }) => h(DataTableColumnHeader, { column, title: "优先级" }),
    cell: ({ row }) => {
      const priority = priorities.find((priority) => priority.value === row.getValue("priority"));
      if (!priority) return null;
      switch(priority.value) {
        case 'low':
          return h("div", { class: "flex items-center" }, [
            priority.icon && h(priority.icon, { class: "mr-2 h-4 w-4 text-indigo-500" }),
            h("span", {}, priority.label),
          ]);
        case 'medium':
          return h("div", { class: "flex items-center" }, [
            priority.icon && h(priority.icon, { class: "mr-2 h-4 w-4 text-green-500" }),
            h("span", {}, priority.label),
          ]);
        case 'high':
          return h("div", { class: "flex items-center" }, [
            priority.icon && h(priority.icon, { class: "mr-2 h-4 w-4 text-red-500" }),
            h("span", {}, priority.label),
          ]);

      }
      /*return h("div", { class: "flex items-center" }, [
        priority.icon && h(priority.icon, { class: "mr-2 h-4 w-4 text-muted-foreground" }),
        h("span", {}, priority.label),
      ]);*/
    },
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id));
    },
  },
  {
    id: "actions",
    cell: ({ row }) => h(DataTableRowActions, { row }),
  },
];
